<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>任务列表</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="$request.getContextPath()/resources/bootstrap-table/css/bootstrap-table.min.css">
<style type="text/css">
.container-fluid{
  padding: 0px;
  margin: 0px;
  width:100%;
  height:100%;
  position: absolute;
}
.container-fluid .bootstrap-table{
  padding: 0px;
  margin: 0px;
  width:100%;
  height:100%;
}
.container-fluid .bootstrap-table .fixed-table-container{
  padding: 0px;
  margin: 0px;
  width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
		<div id="toolbar">
			<button type="button" class="btn btn-default btn-sm" onclick="handlerTask()">
				<span class="glyphicon glyphicon-plus"></span>任务处理
			</button>
		</div>
		<table data-toggle="table"
		    id="table"
		    data-classes="table table-hover"
		    data-toolbar="#toolbar" 
		    data-show-refresh="true"
			data-search="false" 
			data-show-toggle="true" 
			data-show-columns="true"
			data-show-export="true" 
			data-show-export="true"
			data-pagination="true" 
			data-query-params="queryParams"
			data-query-type="limit" 
			data-show-footer="false"
			data-click-to-select="true" 
			data-single-select="false"
			data-striped="true" 
			data-method="get"
			data-url="$request.getContextPath()/process/history/page"
			data-side-pagination="server" 
			data-page-list="[10, 25, 50, 100, ALL]"
			data-show-pagination-switch="true" 
			data-id-field="deploymentId"
			data-search-on-enter-key="true" 
			data-pagination-v-align="bottom"
			data-show-pagination-switch="true">
			<thead>
			  <tr>
			     <th data-checkbox="true" data-width="40px"></th>
                 <th data-field="id">任务ID</th>
                 <th data-field="processInstanceId">实例ID</th>
                 <th data-field="name">任务名称</th>
                 <th data-field="owner">任务发起人</th>
                 <th data-field="createTime">创建时间</th>
                 <th data-field="description">任务描述</th>
			  </tr>
			</thead>
		</table>
  </div>
</body>
<script src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script src="$request.getContextPath()/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layer/layer.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap-table/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
//完成任务
function handlerTask(){
	var $table = $('#table');   
	var selections=$table.bootstrapTable("getSelections");
	if(selections!=null&&selections.length==1){
		$.post("$request.getContextPath()/process/task/complete?taskId="+selections[0].id,function(data){
			if(data.code==200){
				top.layer.msg(data.msg,{
					icon: 1,
					skin: 'demo-class',
					title :'信息',
					time:500,
				    area: ['300px', '160px'],
				    offset: 'rb',
				    end :function(){
				    	var $table = $('#table'); 
				    	$table.bootstrapTable("refresh");
				    }
				});
			}else{
				layer.alert(data.msg);
			}
		});
	}else{
		layer.alert("请选择一行");
	}
}
//流程详情
function processInstanceDetail(){
	var $table = $('#table');   
	var selections=$table.bootstrapTable("getSelections");
	var imageData=[];
	if(selections!=null&&selections.length>0){
		for(var i=0,len=selections.length;i<len;i++){
			var processDefinitionId=selections[i].processDefinitionId;
			imageData.push({"src": "$request.getContextPath()/process/instance/resource?processDefinitionId="+processDefinitionId});
		}
		layer.photos({
		    photos: {
		    	  "title": "流程图", //相册标题
		    	  "start": 0,
		    	  "data": imageData
		    	}
		  });
	}else{
		layer.alert("请选择一行");
	}
}
//表格查询参数
function queryParams(params) {
    return {
    	beginIndex:params.offset,
    	pageSize:params.limit
    };
}
</script>
</html>